<template>
  <view>
    <swiper
      class="card-swiper"
      :circular="true"
      :autoplay="true"
      interval="5000"
      duration="500"
      @change="cardSwiper"
    >
      <swiper-item
        v-for="(item, index) in swiperList"
        :key="item.contentId"
        :class="[
          cardCur == index ? 'cur' : '',
          cardCur == 0 ? 'nostart' : 'statrright',
        ]"
        @click="jump(item)"
      >
        <view class="swiper-item swiper_self">
          <view :class="cardCur == index ? 'downMask mask' : 'mask'"></view>
          <image
            :src="item.covers[0].fileUrl"
            mode="aspectFill"
            v-if="item.covers[0].fileUrl"
          ></image>
          <!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
          <view class="swiper_img_text">
            <text>{{ item.title }}</text>
            <!-- <text>一个优雅的房间里永远缺一件沙发</text> -->
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    swiperList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      cardCur: 0,
      dotStyle: false,
      towerStart: 0,
      direction: "",
    };
  },
  created() {
    this.TowerSwiper("swiperList");
    // 初始化towerSwiper 传已有的数组名即可
  },
  methods: {
    DotStyle(e) {
      this.dotStyle = e.detail.value;
    },
    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current;
      this.$emit("swiperDot", e.detail.current);
    },
    // towerSwiper
    // 初始化towerSwiper
    TowerSwiper(name) {
      let list = this[name];
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex =
          parseInt(list.length / 2) +
          1 -
          Math.abs(i - parseInt(list.length / 2));
        list[i].mLeft = i - parseInt(list.length / 2);
      }
      this.swiperList = list;
    },

    // towerSwiper触摸开始
    TowerStart(e) {
      this.towerStart = e.touches[0].pageX;
    },

    // towerSwiper计算方向
    TowerMove(e) {
      this.direction =
        e.touches[0].pageX - this.towerStart > 0 ? "right" : "left";
    },

    // towerSwiper计算滚动
    TowerEnd(e) {
      let direction = this.direction;
      let list = this.swiperList;
      if (direction == "right") {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < this.swiperList.length; i++) {
          this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
          this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
        }
        this.swiperList[list.length - 1].mLeft = mLeft;
        this.swiperList[list.length - 1].zIndex = zIndex;
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = this.swiperList.length - 1; i > 0; i--) {
          this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
          this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
        }
        this.swiperList[0].mLeft = mLeft;
        this.swiperList[0].zIndex = zIndex;
      }
      this.direction = "";
      this.swiperList = this.swiperList;
    },
    jump(item) {
      const { contentSubType, webUrl, targetType, contentId } = item;
      console.log(contentSubType, targetType);
      if (targetType == 0) {
        //不跳转
        return;
      }
      let url = "";
      if (contentSubType == 2) {
        //图文h5
        url = "/pages/article/article?id=" + contentId;
      } else if (contentSubType == 3) {
        //图
        url = "/pages/photo/photo?id=" + contentId;
      } else if (contentSubType == 4) {
        //音频
        return;
      } else if (contentSubType == 5) {
        //视频
        url = "/pages/video/video?id=" + contentId;
      } else if (contentSubType == 7) {
        url = "/pages/picAtlas/picAtlas?id" + contentId;
      } else if (contentSubType == 1) {
        //标题用不上
        return;
      }
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tower-swiper .tower-item {
  transform: scale(calc(0.5 + var(--index) / 10));
  margin-left: calc(var(--left) * 100upx - 150upx);
  z-index: var(--index);
}
.swiper_self {
  position: relative;
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: all 0.5s;
    border-radius: 20rpx;
  }
  .downMask {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .swiper_img_text {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background: linear-gradient(
      0deg,
      rgba(3, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    border-radius: 20rpx;
    padding-left: 20rpx;
    padding-right: 30rpx;
    padding-top: 50rpx;
    padding-bottom: 32rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    > text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }
  }
}
/* ==================
         轮播
 ==================== */

.screen-swiper {
  min-height: 375upx;
}

.screen-swiper image,
.screen-swiper video,
.swiper-item image,
.swiper-item video {
  width: 100%;
  display: block;
  height: 100%;
  margin: 0;
  pointer-events: none;
  border-radius: 20rpx;
}

.card-swiper {
  height: 390rpx;
}

.card-swiper swiper-item {
  width: 654rpx !important;
  right: 50upx;
  box-sizing: border-box;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  border-radius: 20rpx;
  transform: scale(0.9);
  transition: all 0.2s ease-in 0s;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  border-radius: 20rpx;
  transform: none;
  transition: all 0.2s ease-in 0s;
}

.tower-swiper {
  height: 420upx;
  position: relative;
  max-width: 750upx;
  overflow: hidden;
}

.tower-swiper .tower-item {
  position: absolute;
  width: 300upx;
  height: 380upx;
  top: 0;
  bottom: 0;
  left: 50%;
  margin: auto;
  transition: all 0.2s ease-in 0s;
  opacity: 1;
}

.tower-swiper .tower-item.none {
  opacity: 0;
}

.tower-swiper .tower-item .swiper-item {
  width: 100%;
  height: 100%;
  border-radius: 6upx;
  overflow: hidden;
}
.statrright {
  right: 50rpx !important;
}
.nostart {
  right: 70rpx !important;
}
</style>
